<template>
  <div>
    <div class="public-title">
      <h2 :class="activeName == 1 ? 'active' : ''" @click="activeName = 1">
        {{ showModuleName('szys') }}散点图
      </h2>
      <h2 :class="activeName == 2 ? 'active' : ''" @click="activeName = 2">
        {{ showModuleName('szys') }}资源分布图
      </h2>
    </div>
    <div v-if="activeName == 1">
      <ThirdData v-if="chartData.length > 0" :data="chartData" />
    </div>
    <div v-if="activeName == 2">
      <el-row :gutter="20">
        <el-col :span="12">
          <FirstData v-if="chartData.length > 0" :data="chartData" />
        </el-col>
        <el-col :span="12">
          <SecondData v-if="chartData.length > 0" :data="chartData" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { openApiStatisticalDataQuerySzTotal } from '@/api/admin/data/data'
import homeConfig from '@/mixins/homeConfig'
import Bus from '@/utils/bus.js'
export default {
  mixins: [homeConfig],
  components: {
    FirstData: () => import('./firstData.vue'),
    SecondData: () => import('./secondData.vue'),
    ThirdData: () => import('./thirdData.vue'),
  },
  data() {
    return {
      activeName: '1',
      listQuery: {
        deptType: 1, //单位类型；1-校区，2-系，3-教研室
        selection: '', //是否精选课程，1-是，0-否
        sourceUnit: '', //单位
      },
      chartData: [],
    }
  },
  mounted() {
    this.getList()
    Bus.$on('sendSchoolId', (v) => {
      Object.assign(this.listQuery, v)
      this.getList()
    })
  },
  beforeDestroy() {
    Bus.$off('sendSchoolId')
  },
  methods: {
    getList() {
      openApiStatisticalDataQuerySzTotal(this.listQuery).then((res) => {
        let temp = res.data.data
        temp.forEach((item) => {
          if (
            item.hasOwnProperty('level1') &&
            item.hasOwnProperty('level2') &&
            item.hasOwnProperty('level3')
          ) {
            this.chartData.push(item)
          }
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.public-title {
  position: relative;
  height: 42px;
  line-height: 42px;
  border-bottom: 1px solid #fff;
  background: url('~@/assets/icon04.png') no-repeat left center;
  h2 {
    text-indent: 20px;
    font-size: 16px;
    float: left;
    cursor: pointer;
    &.active {
      color: #2699f4;
    }
  }
}
</style>